<template>
  <div
    id="home"
    v-if="flashingScreen"
    v-cloak
    :class="{ h5: this.$store.state.webType === 'h5' }"
  >
    <el-row :span="24" class="page">
      <el-col :span="24">
        <div class="banner-col">
          <el-carousel
            trigger="click"
            :height="bannerHeight + 'px'"
            :initial-index="currentIndex"
            ref="homeCarousel"
            @change="changeBanner"
            indicator-position="none"
          >
            <el-carousel-item
              v-for="(banner, bdx) in bannerList"
              :name="bdx + ''"
              :key="bdx"
            >
              <img
                v-if="$store.state.webType !== 'h5'"
                @click.stop="$goDetail(banner.id)"
                class="banner-big"
                :src="banner.imgUrl"
                :alt="banner.title"
              />
              <div v-else
                   @click.stop="$goDetail(banner.id)"
                   :style="{height: '100%',background: `url('${banner.imgUrl}') no-repeat  center`,
                   backgroundSize: 'contain'}"></div>
            </el-carousel-item>
          </el-carousel>
          <div class="col-text" v-if="$store.state.webType === 'pc'">
            <template v-for="(banner, bdx) in bannerList">
              <!--              @click="changeBanner(bdx)"-->
              <div
                @click="$goDetail(banner.id)"
                class="text-item"
                :class="{ active: currentIndex == bdx }"
              >
                <div>
                  <div class="two-line">
                    {{ banner.title }}
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="col-text" v-if="$store.state.webType === 'h5'">
            <template v-for="(banner, bdx) in bannerList">
              <div
                v-show="currentIndex == bdx"
                @click="changeBanner(bdx)"
                class="text-item"
                :class="{ active: currentIndex == bdx }"
              >
                <div class="two-line">
                  {{
                    $store.state.lang == 'CN'
                      ? banner.title
                      : banner.titleEnglish
                  }}
                </div>
              </div>
            </template>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :span="24" class="page-content">
      <div class="advertise-view" v-if="advertiseDatA.length > 0">
        <img
          width="100%"
          @click="goAd(advertiseDatA[0].link)"
          :src="advertiseDatA[0].imgUrl"
          :alt="advertiseDatA[0].title"
        />
      </div>
      <el-row :span="24" class="say-row">
        <div class="line xi">
          <lm-item :lmName="jsfbList[0].lmName" :list="jsfbList"></lm-item>
          <lm-item :lmName="cxsmList[0].lmName" :list="cxsmList"></lm-item>
          <lm-item :lmName="zggjcList[0].lmName" :list="zggjcList"></lm-item>
          <!-- jsfbList: [], // 卷首发布List
          cxsmList: [], // --------初心使命
          zggjcList: [], // --------中国关键词
          sdjdList: [], // ----------深度解读
          xzcList: [], // -----------新征程
          xsddzgrList: [], // ------新时代的中国人 -->
          <hot-article></hot-article>
        </div>
        <div class="line">
          <lm-item :lmName="sdjdList[0].lmName" :list="sdjdList"></lm-item>
          <lm-item :lmName="xzcList[0].lmName" :list="xzcList"></lm-item>
          <lm-item
            :lmName="xsddzgrList[0].lmName"
            :list="xsddzgrList"
          ></lm-item>
          <new-book></new-book>
        </div>
      </el-row>
      <div class="advertise-view" v-if="advertiseDatA.length > 1">
        <img
          width="100%"
          @click="goAd(advertiseDatA[1].link)"
          :src="advertiseDatA[1].imgUrl"
          :alt="advertiseDatA[1].title"
        />
      </div>
      <!-- ddzgList: [], // ------读懂中国
      tsList: [], // ------图说
      ssList: [], // ------数说
      zggsList: [], // ------我的中国故事
      wzyyList: [], // ------五洲有约 -->
      <div class="lm-bottom">
        <div class="left-col">
          <div class="lm-title" @click="$goPage(ddzgList[0].path)">{{ ddzgList[0].lmName }}</div>
          <div class="col-view">
            <template v-for="(item, index) in ddzgList">
              <div class="col-item first" v-if="index === 0 && index< 5">
                <div class="scale-view">
                  <div class="img-view">
                    <img
                      :src="item.imgUrl"
                      @click.stop="$goDetail(item.id)"
                      :alt="item.title"
                    />
                  </div>
                </div>
                <div class="text-view">
                  <div class="item-title" @click.stop="$goDetail(item.id)" v-html="item.title">
                  </div>
                  <div class="item-cotent">{{ item.content }}</div>
                  <!--                  <div class="more" @click.stop="$goDetail(item.id)">-->
                  <!--                    {{ $t('more') }} >-->
                  <!--                  </div>-->
                </div>
              </div>
              <div class="col-item" v-else-if="index > 0 && index< 5">
                <div class="text-view">
                  <div class="item-title" @click.stop="$goDetail(item.id)">
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="more" @click.stop="$goPage(ddzgList[0].path)">{{ $t('more') }} ></div>
        </div>
        <div class="right-col">
          <div class="col-line">
            <!--            <div class="lm-title">-->
            <!--                {{ $t('fabujinglan') }}-->
            <!--              <div class="more" @click.stop="$goPage(tsList[0].path)">{{ $t('more') }} ></div>-->
            <!--            </div>-->
            <div class="line-item">
              <!--              <div class="lm-title">{{ $t('fabujinglan') }} <span>/{{ tsList[0].lmName }}</span>-->
              <!--              </div>-->
              <div class="lm-title" @click="$goPage('/fbjl')">
                {{ this.$store.state.lang != 'EN' ? $t('fabujinglan') : tsList[0].lmName }}
                <span v-if="this.$store.state.lang != 'EN'">/{{
                    `${tsList[0].lmName}发布`
                  }}</span>
              </div>
              <div class="item-view">
                <div class="img-view">
                  <img :src="tsList[0].imgUrl"/>
                </div>
                <div
                  class="item-title bg-half"
                  @click.stop="$goDetail(tsList[0].id)"
                >
                  {{ tsList[0].title }}
                </div>
              </div>
            </div>
            <div class="line-item">
              <div class="lm-title" @click="$goPage('/fbjl')">
                {{ this.$store.state.lang != 'EN' ? $t('fabujinglan') : ssList[0].lmName }}
                <span v-if="this.$store.state.lang != 'EN'">/{{
                    `${ssList[0].lmName}发布`
                  }}</span>
              </div>
              <div class="item-view">
                <div class="img-view" style="cursor: pointer">
                  <img
                    @click.stop="$goDetail(ssList[0].id)"
                    :src="ssList[0].imgUrl"
                  />
                </div>
                <div
                  class="item-title bg-half"
                  @click.stop="$goDetail(ssList[0].id)"
                >
                  {{ ssList[0].title }}
                </div>
              </div>
            </div>
          </div>
          <div class="col-line">
            <div class="line-item">
              <div class="lm-title" @click="$goPage(zggsList[0].path)">{{
                  zggsList[0].lmName
                }}
              </div>
              <div class="item-view">
                <div class="img-view">
                  <img :src="zggsList[0].imgUrl"/>
                </div>
                <div
                  class="item-title bg-half"
                  @click.stop="$goDetail(zggsList[0].id)"
                >
                  {{ zggsList[0].title }}
                </div>
              </div>
            </div>
            <div class="line-item">
              <div class="lm-title" @click="$goPage(wzyyList[0].path)">{{
                  wzyyList[0].lmName
                }}
              </div>
              <div class="item-view">
                <div class="img-view">
                  <img :src="wzyyList[0].imgUrl"/>
                </div>
                <div
                  class="item-title bg-half"
                  @click.stop="$goDetail(wzyyList[0].id)"
                >
                  {{ wzyyList[0].title }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import HotArticle from '@/components/HotArticle';
import NewBook from '@/components/NewBook';
import LmItem from '@/components/LmItem';

export default {
  name: 'Home',
  components: {
    HotArticle,
    NewBook,
    LmItem,
  },
  data() {
    return {
      // 解决闪屏问题
      flashingScreen: false,

      // 当前展示的banner index
      currentIndex: 0,
      bannerList: [],
      bookData: {
        imgUrl: '',
        textList: [
          {
            title: '卷首发布',
            content:
              '在庆祝香港回归祖国25周年大会暨香港特别行政区第六届政府就职典礼上的讲话',
          },
          {
            title: '读懂中国',
            content: '永远的朋友 真诚的伙伴--寨中关系更进一步',
          },
        ],
      },
      articleData: [
        {
          title: '习近平：在庆祝中国共产主义青年团成立 100周年大会上的讲话',
        },
        {
          title: '我有一颗“中国心”',
        },
        {
          title: '弘扬爱国民主科学优良传统 为加快建设科技',
        },
        {
          title: '让新时代科学家精神在中华大地扎根绽放',
        },
        {
          title: '马克思主义哲学同中华优秀传统文化相结合的',
        },
        {
          title: '让新时代科学家精神在中华大地扎根绽放',
        },
        {
          title: '马克思主义哲学同中华优秀传统文化相结合的',
        },
        {
          title: '让新时代科学家精神在中华大地扎根绽放',
        },
        {
          title: '马克思主义哲学同中华优秀传统文化相结合的',
        },
        {
          title: '马克思主义哲学同中华优秀传统文化相结合的',
        },
      ],
      catData: [],
      currentNumIndex: 0,
      numSayData: [],
      imgSayData: [],
      advertiseDatA: [],
      bannerHeight: 0, // 轮播图容器高度;
      bannerHeight2: 0, // 轮播图容器高度;
      screenWidth: 0, // 页面宽度
      jsfbList: [{
        imgUrl: '',
        lmName: '',
      }], // 卷首发布List
      cxsmList: [{
        imgUrl: '',
        lmName: '',
      }], // --------初心使命
      zggjcList: [{
        imgUrl: '',
        lmName: '',
      }], // --------中国关键词
      sdjdList: [{
        imgUrl: '',
        lmName: '',
      }], // ----------深度解读
      xzcList: [{
        imgUrl: '',
        lmName: '',
      }], // -----------新征程
      xsddzgrList: [{
        imgUrl: '',
        lmName: '',
      }], // ------新时代的中国人

      ddzgList: [{
        imgUrl: '',
        lmName: '',
      }], // ------读懂中国
      tsList: [{
        imgUrl: '',
        lmName: '',
      }], // ------图说
      ssList: [{
        imgUrl: '',
        lmName: '',
      }], // ------数说
      zggsList: [{
        imgUrl: '',
        lmName: '',
      }], // ------我的中国故事
      wzyyList: [{
        imgUrl: '',
        lmName: '',
      }], // ------五洲有约
    };
  },
  created() {
    //  console.log(this.$appType.name);
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth;
    this.bannerHeight = (750 / 1920) * this.screenWidth;
    this.bannerHeight2 = (440 / 1920) * this.screenWidth;
    if (this.$store.state.webType === 'h5') {
      this.bannerHeight += 42;
    }
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.bannerHeight = (750 / 1920) * this.screenWidth;
      this.bannerHeight2 = (440 / 1920) * this.screenWidth;
      if (this.$store.state.webType === 'h5') {
        this.bannerHeight += 42;
      }
    };
    this.getHomeInfo();
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.flashingScreen = true;
      }, 300);
    });
  },
  computed: {
    // 获取名称
    getCallerName() {
      return (index) => {
        if (index === this.currentNumIndex) {
          if ((index + 1) % 2 === 0) {
            return `url(${require('@/assets/images/num-title-bg22.png')}) 100% 100% no-repeat`;
          }
          return `url(${require('@/assets/images/num-title-bg11.png')}) 100% 100% no-repeat`;
        }
        if ((index + 1) % 2 === 0) {
          return `url(${require('@/assets/images/num-title-bg02.png')}) 100% 100% no-repeat`;
        }
        return `url(${require('@/assets/images/num-title-bg01.png')}) 100% 100% no-repeat`;
      };
    },
  },
  methods: {
    goAd(link) {
      return;
      window.open(link, '_blank');
    },
    getHomeInfo() {
      this.$get(`${this.$api}/cms/web/getHomeInfo`, {
        token: sessionStorage.getItem('token'),
      })
        .then((res) => {
          //  console.log(res);
          this.catData = res.data.catData;
          this.bannerList = res.data.bannerList;
          this.imgSayData = res.data.imgSayData;
          this.numSayData = res.data.numSayData;
          this.advertiseDatA = res.data.advertiseDatA;

          this.jsfbList = res.data.jsfbList;
          this.cxsmList = res.data.cxsmList;
          this.zggjcList = res.data.zggjcList;
          this.sdjdList = res.data.sdjdList;
          this.xzcList = res.data.xzcList;
          this.xsddzgrList = res.data.xsddzgrList;

          this.ddzgList = res.data.ddzgList;
          this.tsList = res.data.tsList;
          this.ssList = res.data.ssList;
          this.zggsList = res.data.zggsList;
          this.wzyyList = res.data.wzyyList;
        });
    },
    changeBanner(index) {
      this.currentIndex = index;
      this.$refs.homeCarousel.setActiveItem(index);
    },
    changeNumShow(index) {
      //  console.log(index);
      this.$refs.carousel.setActiveItem(index);
      this.currentNumIndex = index;
      this.$nextTick(() => {
        const ref = `num${index}Ref`;
        // 获取myTabRef的DOM元素，即类名为my-tab的标签
        const line = this.$refs.myLineRef;
        const view = this.$refs.titleView;
        // 获取当前点击的某一个tab的的DOM元素，即类名为my-tab-item的标签
        const active = this.$refs[ref][0].style;
        // console.log(line, active);
        if (this.$store.state.webType === 'h5') {
          if (index > 0) {
            if (index >= this.numSayData.length - 1) {
              line.style.transform = `translateX(-${
                line.offsetWidth - view.offsetWidth - 20
              }px)`;
            } else {
              line.style.transform = `translateX(-${
                (index / this.numSayData.length) * 100
              }%)`;
            }
          } else if (index === 0) {
            line.style.transform = `translateX(-${0}%)`;
          }
        } else if (index > 2 && this.numSayData.length - index > 0) {
          if (index >= this.numSayData.length - 2) {
            line.style.transform = `translateX(-${
              line.offsetWidth - view.offsetWidth - 20
            }px)`;
          } else {
            line.style.transform = `translateX(-${
              ((index - 2) / this.numSayData.length) * 100
            }%)`;
          }

          // let num = this.getTranslateX(document.querySelector(".view-max"));
          // line.style.transform = `translateX(${num - 20 * 10}}px)`;
        } else if (index === 0) {
          line.style.transform = `translateX(-${0}%)`;
        }

        // console.log(nav.offsetWidth, title.offsetLeft);
        // console.log("nav", nav, title);
        // 计算位移偏差
        // const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
        // console.log(to);
        // console.log(title.offsetLeft, title.offsetWidth);
        // active.left = title.offsetLeft + title.offsetWidth / 2 + "px";
        // active.scrollLeft = to;
      });
    },
    getTranslateX(myElement) {
      const style = window.getComputedStyle(myElement);
      const matrix = new WebKitCSSMatrix(style.webkitTransform);
      //  console.log('translateX: ', matrix.m41);
    },
    // 滑动
    scrollLeftTo(name) {
      this.$nextTick(() => {
        const ref = `tab${name}Ref`;
        // 获取myTabRef的DOM元素，即类名为my-tab的标签
        const nav = this.$refs.myTabRef;
        const active = this.$refs.navActive.style;

        // 获取当前点击的某一个tab的的DOM元素，即类名为my-tab-item的标签
        const title = this.$refs[ref][0];
        // console.log(nav.offsetWidth, title.offsetLeft);
        // console.log("nav", nav, title);
        // 计算位移偏差
        const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
        // console.log(to);
        // console.log(title.offsetLeft, title.offsetWidth);
        active.left = `${title.offsetLeft + title.offsetWidth / 2}px`;
        // active.scrollLeft = to;
      });
    },
  },
};
</script>
<style>
[v-cloak] {
  display: none;
}
</style>
<style lang="scss" scoped>
#home {
  position: relative;
  width: 100%;

  &::after {
    // content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url("../assets/images/home-bg.jpg") no-repeat;
    background-size: 100% auto;
    background-position: center 0;
  }

  .page {
    padding: fh(152vh, pc) fw(80vw, pc) 0 fw(80vw, pc);
    background: #fff;
    //   #home .page::after {
    // content: "";
    // position: absolute;
    // left: 0;
    // top: 0;
    // z-index: -1;
    // width: 100%;
    // height: max-content;
    // background: url("../assets/images/home-bg.jpg") no-repeat;
    // background-size: cover;
    // background-position: center 0;
    // }
  }

  .page-content {
    background-color: #fff;
    padding: 0 fw(80vw, pc) fh(40vh, pc) fw(80vw, pc);
  }

  // ::v-deep .el-carousel {
  //   background: rgba(15, 0, 0, 1);
  // }

  .lm-bottom {
    width: 100%;
    display: flex;
    margin-top: fh(40vh, pc);

    .lm-title {
      width: 100%;
      font-size: fh(24vh, pc);
      font-weight: bold;
      color: $zh;
      line-height: fh(36vh, pc);
      text-align: center;
      padding: fh(12vh, pc) 0;
      background-color: #f6f6f6;
      font-weight: 800;

      &:hover {
        color: $zh;
        opacity: 0.8;
        cursor: pointer;
      }
    }

    .left-col {
      width: fw(560vw, pc);
      padding-bottom: fh(50vh, pc);
      position: relative;

      .more {
        position: absolute;
        right: fw(20vw, pc);
        bottom: fh(20vh, pc);
        font-size: fh(14vh, pc);
        line-height: fh(20vh, pc);
        color: #686a67;

        &:hover {
          color: $zh;
          opacity: 0.8;
          cursor: pointer;
        }
      }

      > .more {
        bottom: 0;
      }

      .col-view {
        .col-item {
          width: 100%;
          padding: fh(16vh, pc) 0;
          border-bottom: 1px solid #edf1f3;
          position: relative;

          > div {
            overflow: hidden;
          }

          .text-view {
            flex: 1;
          }

          .img-view {
            width: 100%;
            max-height: fh(320vh, pc);
            overflow: hidden;

            img {
              width: 100%;
            }
          }

          .item-title {
            width: 100%;
            font-size: fh(20vh, pc);
            line-height: fh(25vh, pc);
            color: $sh;
            font-weight: 600;
            word-wrap: break-word;
            word-break: break-all;
            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
            height: fh(24vh, pc);

            &:hover {
              color: $zh;
              opacity: 0.8;
              cursor: pointer;
            }
          }

          &.first {
            padding-top: 0;

            .item-title {
              word-break: keep-all; /* 不换行 */
              white-space: break-spaces;
              padding-top: fh(20vh, pc);
              line-height: fh(30vh, pc);
              height: max-content;
            }
          }

          .item-content {
            margin-top: fh(20vh, pc);
            font-size: fh(14vh, pc);
            line-height: fh(22vh, pc);
            color: #686a67;
          }
        }
      }
    }

    .right-col {
      margin-left: fw(40vw, pc);
      flex: 1;

      .col-line {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .line-item {
          position: relative;
          flex: 1;
          width: fw(550vw, pc);
          overflow: hidden;

          .img-view {
            max-height: fh(320vh, pc);

            img {
              width: 100%;
              //min-height: fh(320vh, pc);
            }
          }

          .item-view {
            .item-title {
              position: absolute;
              bottom: 0;
              width: 100%;
              padding: fh(20vh, pc) fw(20vw, pc);
              font-size: fh(20vh, pc);
              color: #fbfeff;
              line-height: fh(30vh, pc);
              font-weight: 600;

              &:hover {
                opacity: 0.8;
                cursor: pointer;
              }
            }
          }
        }

        &:nth-child(2) {
          .line-item:nth-child(1) {
            margin-right: fw(40vw, pc);
          }
        }

        &:nth-child(1) {
          margin-bottom: fh(40vh, pc);
          background-color: #ececec;
          padding-bottom: fh(20vh, pc);

          .line-item:nth-child(2) {
            margin-right: 0;
          }

          > .lm-title:nth-child(1) {
            position: relative;
            background-color: #f6f6f6;

            .more {
              position: absolute;
              top: 50%;
              right: fw(20vw, pc);
              transform: translateY(-50%);
              font-size: fh(14vh, pc);
              line-height: fh(20vh, pc);
              color: #686a67;
              font-weight: 500;

              &:hover {
                color: $zh;
                opacity: 0.8;
                cursor: pointer;
              }
            }
          }

          .line-item {
            background-color: #ececec;
            margin: 0 fw(20vw, pc);

            .lm-title {
              position: relative;
              background-color: #ececec;

              span {
                color: $sh;
                font-size: fh(18vh, pc);
              }

              &:hover {
                //cursor: default;
                //opacity: 1;
              }
            }
          }
        }
      }
    }
  }

  .advertise-view {
    img {
      width: 100%;
      margin-top: fh(40vh, pc);
      display: block;

      &:hover {
        cursor: pointer;
        opacity: 0.8;
      }
    }
  }

  .say-row {
    > .line {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: fh(40vh, pc);
      width: 100%;
      margin-bottom: fh(40vh, pc);
    }

    ::v-deep .hot-article {
      width: fw(560vw, pc);
      padding-top: fh(12vh, pc);
      padding-bottom: fh(22vh, pc);

      .article-item {
        margin-bottom: fh(20vh, pc) !important;
      }
    }

    ::v-deep .book-view {
      margin-top: 0;
      width: fw(560vw, pc);

      .book-content {
        padding-bottom: fh(30vh, pc);

        .book-row {
          padding-top: fh(26vh, pc);
          padding-bottom: fh(12vh, pc);
        }
      }
    }
  }

  .img-say {
    background-color: $dh;
    position: relative;

    .say-more {
      position: absolute;
      right: fw(20vw, pc);
      bottom: fh(16vh, pc);
      color: rgba(255, 255, 255, 0.5);
      font-size: fh(14vh, pc);

      &:hover {
        color: #fff;
        cursor: pointer;
      }
    }

    .say-label {
      color: $zh;
      position: relative;
      display: inline-block;
      font-size: fh(24vh, pc);
      font-weight: 800;
      margin-top: fh(20vh, pc);
      margin-bottom: fh(10vh, pc);
      padding-left: fw(20vw, pc);
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }

      img {
        position: absolute;
        bottom: fh(-16vh, pc);
        right: fw(-12vw, pc);
        width: fw(42vw, pc);
      }

      // &::after {
      //   content: "";
      //   position: absolute;
      //   bottom: fh(-16vh, pc);
      //   right: fw(-12vw, pc);
      //   width: fw(30vw, pc);
      //   height: fh(18vh, pc);
      //   border-right: fw(6vw, pc) solid $zh;
      //   border-bottom: fw(8vw, pc) solid $zh;
      // }
    }

    .say-view {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      padding: 0 fw(20vw, pc);
      padding-top: fh(26vh, pc);
      // padding-bottom: fh(30vh, pc);
      .say-item {
        width: 32.5%;
        position: relative;
        margin-bottom: fh(30vh, pc);

        img {
          width: 100%;
          display: block;
        }

        .say-content {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          color: #fff;
          padding: fh(20vh, pc) fw(20vw, pc);
          padding-top: fh(80vh, pc);
          box-shadow: 0px -109px 46px -32px rgba(15, 0, 0, 0.7) inset;

          .item-title {
            color: $sh;
            font-size: fh(20vh, pc);
            min-height: fh(52vh, pc);
            // margin-bottom: fh(20vh, pc);
            font-weight: 600;
            line-height: fh(26vh, pc);
            overflow: hidden;
          }

          .item-content {
            font-size: fh(14vh, pc);
            line-height: fh(20vh, pc);
            font-weight: 400;
          }
        }
      }
    }
  }

  .num-row {
    margin-top: fh(40vh, pc);

    .num-info {
      background-color: #fff;

      .info-title {
        position: absolute;
        top: fh(20vh, pc);
        left: fw(20vw, pc);
        z-index: 99;
      }

      .say-more {
        position: absolute;
        right: fw(20vw, pc);
        top: fh(10vh, pc);
        color: rgba(255, 255, 255, 0.5);
        font-size: fh(12vh, h5);

        &:hover {
          color: #fff;
          cursor: pointer;
        }
      }

      // padding: fh(20vh, pc) fw(20vw, pc) fh(20vh, pc) fw(20vw, pc);
    }

    .title-view {
      width: 100%;
      overflow: hidden;
      // overflow-x: scroll;
      .view-max {
        display: flex;
        align-items: center;
        width: max-content;
        white-space: nowrap;
        transition: all 0.3s;
      }

      .title-item {
        // float: left;
        position: relative;
        width: fw(400vw, pc);
        height: fh(120vh, pc);
        background-size: cover !important;
        font-size: fh(20vh, pc);
        color: #fff;
        line-height: 150%;
        text-align: center;
        font-weight: bold;
        margin-right: 10px;

        span {
          position: absolute;
          width: 90%;
          left: 5%;
          top: 50%;
          transform: translateY(-50%);
          white-space: pre-line;
        }

        &:hover {
          cursor: pointer;
          opacity: 0.8;
        }
      }
    }

    .num-label {
      color: $zh;
      position: relative;
      display: inline-block;
      font-size: fh(24vh, pc);
      font-weight: 800;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }

      img {
        position: absolute;
        bottom: fh(-16vh, pc);
        right: fw(-12vw, pc);
        width: fw(42vw, pc);
      }
    }

    .num-view {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      // justify-content: space-between;
      // padding: 0 fw(40vw, pc);
      // padding-top: fh(60vh, pc);
      > img {
        width: 100%;
      }

      .num-title {
        width: 35%;
        background-color: #ec9461;
        margin-right: 3%;
        margin-bottom: fh(20vh, pc);
        font-size: fh(30vh, pc);
        color: $zh;
        text-align: center;
        padding: fh(10vh, pc) 0;
      }

      .num-item {
        width: 11.5%;
        padding-bottom: fh(30vh, pc);
        margin-right: 8.5%;

        .item-title {
          color: $sh;
          font-size: fh(32vh, pc);
          padding-bottom: fh(16vh, pc);
        }

        .item-content {
          font-size: fh(14vh, pc);
          line-height: fh(20vh, pc);
        }
      }
    }
  }

  .banner-col {
    display: flex;
    align-content: flex-start;
    width: 100%;
    margin-right: fw(20vw, pc);
    position: relative;
    cursor: pointer;
    // ::v-deep .el-carousel__container {
    //   height: fh(610vh, pc) !important;
    // }
    .el-carousel {
      width: fw(1200vw, pc);
      min-height: 60vh;

      img {
        height: inherit;
        width: 100%;
        display: block;
      }
    }

    .col-text {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      // align-items: center;
      .text-item {
        display: flex;
        align-items: center;
        width: 100%;
        color: $sh;
        padding: fh(20vh, pc) fw(40vw, pc);
        background-color: #f5f5f5;
        font-size: fh(18vh, pc);
        line-height: fh(26vh, pc);
        margin: 0;
        border-bottom: 2px solid #b2bfc3;

        &:hover {
          color: #3B64FD;
        }

        > div {
          position: relative;

          &::before {
            display: none;
            content: "";
            position: absolute;
            border-style: solid;
            border-color: transparent;
            border-width: 5px 0 5px 5px;
            border-left-color: #fff;
            left: fw(-9vw, pc);
            top: fh(12vh, pc);
          }
        }

        &.active {
          position: relative;
          background-color: #3b64fd;
          color: #fff;
          // font-weight: bold;
          font-size: fh(24vh, pc);
          line-height: fh(36vh, pc);

          > div::before {
            display: block;
          }
        }

        &:nth-last-child(1) {
          border: none;
        }

        &:hover {
          opacity: 0.8;
          cursor: pointer;
        }
      }
    }
  }

  &.h5 .banner-col {
    position: relative;

    .el-carousel {
      width: 100%;
      min-height: auto;
      padding-bottom: 42px;
      //background-color: #f1f1f1;

      .el-carousel__item {
        background-color: #f1f1f1;
      }
    }

    .col-text {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 9;
      width: 100%;

      .text-item {
        width: 100%;
        padding: fh(10vh, h5) fw(10vw, h5);
        font-size: fh(14vh, h5);
        line-height: fh(16vh, h5);
        white-space: nowrap;
        opacity: 0.8;

        > div {
          position: relative;

          &::before {
            display: none;
          }
        }
      }
    }
  }

  .cat-view {
    .cat-item {
      margin-top: fh(44vh, pc);
      position: relative;
      color: #fff;
      overflow: hidden;

      .cat-label {
        position: absolute;
        left: 0;
        top: -1px;
        width: fw(185vw, pc);
        height: fh(66vh, pc);
        line-height: fh(66vh, pc);
        text-align: center;
        z-index: 2;
        color: $zh;
        background: url("../assets/images/cat-lable-bg.png") no-repeat;
        background-size: cover;
        font-size: fh(24vh, pc);
        font-weight: bold;

        &.en {
          line-height: fh(24vh, pc);

          span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -60%);
          }
        }

        &:hover {
          opacity: 0.8;
        }
      }

      .cat-img {
        display: block;
        width: 100%;
      }

      .cat-content {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: fh(20vh, pc) fw(20vw, pc);
        box-shadow: 0px -109px 46px -32px rgba(15, 0, 0, 0.7) inset;

        .content-title {
          width: 100%;
          font-size: fh(20vh, pc);
          line-height: fh(26vh, pc);
          height: fh(50vh, pc);
          font-weight: 600;
        }

        .content {
          width: 100%;
          font-size: fh(14vh, pc);
          font-weight: 400;
          line-height: fh(20vh, pc);
          margin: fh(12vh, pc) 0;
        }

        .cat-more {
          float: right;
          font-size: fh(14vh, pc);
          font-weight: 600;
          line-height: fh(20vh, pc);

          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
  }
}

#home.h5 {
  .page {
    padding-top: fh(60vh, h5) !important;
  }

  ::v-deep .hot-article {
    width: 100%;
  }

  ::v-deep .book-view {
    width: 100%;
  }

  .lm-bottom {
    flex-wrap: wrap;

    .left-col {
      width: 100%;

      .col-view .col-item.first .scale-view {
        width: 100%;

        img {
          width: 100%;
        }
      }
    }

    .right-col {
      width: 100%;
      margin-top: fh(30vh, h5);
      margin-left: 0;

      .col-line:nth-child(1) .line-item {
        width: 100%;
      }

      .col-line .line-item {
        width: 100%;
        flex: auto;
        margin: 0;
        margin-bottom: fh(20vh, h5);

        .img-view,
        img {
          height: auto;
          max-height: max-content;
        }

        .item-view .item-title {
          padding: fh(10vh, h5) fw(10vw, h5);
        }
      }
    }
  }

  .banner-item {
    .item-content .content-title {
      .title1 {
        width: max-content;
        padding-right: fw(10vw, h5);
      }

      .title2 {
        padding: 0;
        line-height: 20px;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        // 下面这句用来控制行数
        line-clamp: 1;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        flex: 1;
      }
    }
  }

  // ::v-deep .el-carousel__container {
  //   height: fh(86vh, h5) !important;
  // }
  .num-row {
    margin-top: fh(50vh, h5);

    .num-info {
      .info-title {
        top: 0;
        transform: translateY(-100%);
        width: 100%;
        background-color: #2e2e2e;
        padding: fh(10vh, h5) fh(4vh, h5);
        padding-top: fh(3vh, h5);
        left: 0;

        .num-label {
          font-size: fh(12vh, h5);

          img {
            width: fw(16vw, h5);
            bottom: fh(-4vh, h5);
            right: fw(-4vw, h5);
          }
        }
      }
    }
  }

  .num-row .title-view .title-item {
    width: 230px;
    height: 66px;
    line-height: 16px;
    font-size: 12px;
    background-size: cover !important;
  }

  .say-row {
    flex-wrap: wrap;

    .row-right {
      margin: 0;
      margin-top: 0;

      .hot-article .article-view .article-item {
        width: 90vw;
      }

      .book-content .book-row {
        align-items: center;

        img.book-img {
          width: 51%;
          height: auto;
        }

        .book-text {
          flex: 1;
          margin-left: fw(10vw, h5);
        }
      }

      .book-content .book-btn {
        img {
          width: 30%;
        }
      }
    }

    .img-say {
      width: 100%;

      .say-view {
        padding: fw(10vw, h5);

        .say-item {
          width: 49%;
          margin-bottom: fh(12vh, h5);
          height: max-content !important;

          .say-content {
            padding: 10px 6px;
            padding-top: 80px;

            .item-title {
              color: $sh;
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }

      .say-label {
        font-size: fh(12vh, h5);
        margin-top: fh(15vh, h5);
        margin-bottom: 0;

        img {
          width: fw(16vw, h5);
          bottom: fh(-4vh, h5);
          right: fw(-4vw, h5);
        }

        // &:after {

        //   height: fh(10vh, h5);
        //   border-right: 2px solid $zh;
        //   border-bottom: 2px solid $zh;
        // }
      }

      .say-more {
        font-size: fh(12vh, h5);
        top: fh(15vh, h5);
      }
    }
  }

  .cat-view.el-row {
    display: flex;
    flex-wrap: wrap;

    .el-col {
      width: 50%;

      .cat-item {
        margin-top: fh(20vh, h5);

        .cat-label {
          width: 52%;
          font-size: fh(14vh, h5);
          height: fh(32vh, h5);
          line-height: fh(32vh, h5);

          span {
            line-height: 110%;
          }
        }
      }
    }
  }
}

.en #home.h5 .cat-view.el-row .el-col .cat-item .cat-label {
  width: 90px;
  height: 32px;
  font-size: 12px;
}

.h5#home .img-say .say-view .say-item {
  .say-content .item-title {
    color: $sh;
    margin-bottom: 0;
  }
}
</style>
